// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0

// cSpell: ignore Heade

import { Button, ComboBox, ListView, ScrollView, VerticalBox } from "std-widgets.slint";
import { Api, ComponentItem } from "api.slint";

import { DiagnosticsOverlay } from "./components/diagnostics-overlay.slint";
import { EditorSpaceSettings, Icons } from "./components/styling.slint";
import { StatusLine } from "./components/status-line.slint";
import { HeaderView } from "./views/header-view.slint";
import { LibraryView } from "./views/library-view.slint";
import { DrawAreaMode, PreviewView } from "./views/preview-view.slint";
import { PropertyView } from "./views/property-view.slint";

export { Api }

export component PreviewUi inherits Window {
    property <length> border: 20px;
    property <ComponentItem> visible-component: {
        name: "",
        defined-at: "",
        pretty-location: "",
        is-user-defined: false,
        is-currently-shown: false,
    };
    property <bool> show-left-sidebar: true;
    property <bool> show-right-sidebar: true;

    title: "Slint Live-Preview";
    icon: @image-url("assets/slint-logo-small-light.png");

    VerticalLayout {
        if !Api.show-preview-ui: no-ui-drawing-rect := Rectangle {
            VerticalLayout {
                ComponentContainer {
                    component-factory: Api.preview-area;
                }
            }

            // Diagnostics overlay:
            DiagnosticsOverlay {
                width: 100%;
                height: 100%;
                diagnostics <=> Api.diagnostics;
                show-document(url, line, column) => {
                    Api.show-document(url, line, column);
                }
            }
        }
        if Api.show-preview-ui: Rectangle {
            VerticalLayout {
                header-view := HeaderView {
                    show-left-sidebar <=> root.show-left-sidebar;
                    show-right-sidebar <=> root.show-right-sidebar;

                    edit-mode <=> Api.design-mode;
                    current-style <=> Api.current-style;
                    known-styles <=> Api.known-styles;

                    edit-mode-toggled() => {
                        key-handler.focus();
                    }

                    style-selected => {
                        Api.style-changed();
                    }

                    Button {
                        icon: Icons.inspect;
                        colorize-icon: true;
                        checkable: true;
                        checked <=> preview.select-mode;
                        enabled: !preview.design-mode;
                        visible: !preview.design-mode; 
                    }
                }

                HorizontalLayout {
                    spacing: EditorSpaceSettings.default-spacing;

                    if Api.design-mode && root.show-left-sidebar: LibraryView {
                        known-components: Api.known-components;
                        preview-area-position-x: preview.preview-area-position-x;
                        preview-area-position-y: preview.preview-area-position-y;
                        preview-area-width: preview.preview-area-width;
                        preview-area-height: preview.preview-area-height;
                        visible-component <=> root.visible-component;

                        can-drop(index, x, y, on-drop-area) => {
                            Api.can-drop(index, x, y, on-drop-area);
                        }

                        drop(index, x, y) => {
                            Api.drop(index, x, y);
                        }

                        show-preview-for(name, defined-at) => {
                            Api.show-preview-for(name, defined-at);
                        }
                    }

                    preview := PreviewView {
                        visible-component <=> root.visible-component;
                    }

                    if Api.design-mode && root.show-right-sidebar: PropertyView { }
                }

                StatusLine { }
            }

            key-handler := FocusScope {
                enabled: preview.mode == DrawAreaMode.designing;

                key-released(event) => {
                    if event.text == Key.Delete {
                        // This `if` should not be necessary, but without it
                        // we do trigger deletion of Elements while errors
                        // are on screen.
                        if preview.mode == DrawAreaMode.designing {
                            Api.selected-element-delete();
                        }
                        return accept;
                    }
                    reject
                }
            }
        }
    }
}
